<template>
    <div>
        <div class="homeclass">
            <span>56</span>
            <div class="fille">
                <container-two-tone />
            </div>
            <p>今日挂号人数</p>
            <p class="fille1">
                <arrow-up-outlined />较昨日上涨20%
            </p>
        </div>
        <div class="homeclass1">
            <span>70</span>
            <div class="toneq">
                <contacts-two-tone />
            </div>
            <p>今日接诊人数</p>
            <p class="fille1">
                <arrow-up-outlined />较昨日上涨20%
            </p>
        </div>
        <div class="homeclass2">
            <span>4800</span>
            <div class="tone2">
                <reconciliation-two-tone />
            </div>
            <p>进入收入合计</p>
            <p class="fille1">
                <arrow-up-outlined />较昨日上涨20%
            </p>
        </div>
        <div class="homeclass3">
            <span>20</span>
            <div class="tone3">
                <heart-two-tone />
            </div>
            <p>今日新增会员</p>
            <p class="fille1">
                <arrow-up-outlined />较昨日上涨20%
            </p>
        </div>
        <div class="my-class">
            <LIneEcahrt />
        </div>
        <div>
            <Home1></Home1>
            <Paging></Paging>
            <XinkaiTable  :arr="arr"></XinkaiTable>
        </div>
<<<<<<< HEAD:src/views/Home/Home.vue
=======
        <p>今日新增会员</p>
        <p class="fille1">
            <arrow-up-outlined />较昨日上涨20%
        </p>
    </div>
    <div>
        <LIneEcahrt />
    </div>
    <div class="line">
        <p>今日会员消费占比</p>
    </div>
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>
    <div class="box7"></div>
    <div class="box8">
        <p>今日消费总额</p>
    </div>
    <div class="box9">
        <p><pay-circle-outlined />4200.00</p>
    </div>
    <div class="box10">
        <p><span><customer-service-filled /></span>会员消费占比40.7%</p>
        <p class="box11"><span><star-filled /></span>非会员消费占比59.3%</p>
    </div>
    <div id="myslass">
       
>>>>>>> beb584824be5c8f33b1ca3570e5e5af46136ffeb:src/views/Home/components/Home.vue
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, defineAsyncComponent } from 'vue'
const Paging = defineAsyncComponent(() => import('./components/Paging.vue'))
import LIneEcahrt from './echrats/components/LIneEcahrt.vue'
import Home1 from './components/Home1.vue'
import XinkaiTable from './components/XinkaiTable.vue'
import { HomeList } from "@/api/VipApi"
import Mock from '../../mock/Vip/Tables'
import {
    ContainerTwoTone,
    ContactsTwoTone,
    ReconciliationTwoTone,
    HeartTwoTone,
    ArrowUpOutlined,
    PayCircleOutlined,
    CustomerServiceFilled,
    StarFilled
} from '@ant-design/icons-vue';
import XinKaiTable from './XinKai Table.vue';
export default defineComponent({
    components: {
        ContainerTwoTone,
        ContactsTwoTone,
        ReconciliationTwoTone,
        ArrowUpOutlined,
        HeartTwoTone,
        LIneEcahrt,
<<<<<<< HEAD:src/views/Home/Home.vue
        Home1,
        Paging,
        XinkaiTable,
        Mock,
    },
    setup() {
         const data = reactive({
            arr: [],
            total: 0,
            params: {
                Xinkainame: '', //需要搜索的内容
                page: 1,  //当前页
                pagesize: 10, //一页显示多少条
                begin: '', //开始时间见
            }
         })
        const Home = () => {
            HomeList(data).then((res: any) => {
                if (res.code == 200) {
                    data.arr = res.data
                    data.total = res.total
                    console.log('res',res);
                }
            })
        }
        onMounted(() => {
            Home()
        })
        return { Home,...toRefs(data) }
=======
        PayCircleOutlined,
        CustomerServiceFilled,
        StarFilled
    },
    setup() {

        return {}
>>>>>>> beb584824be5c8f33b1ca3570e5e5af46136ffeb:src/views/Home/components/Home.vue
    }
})
</script>

<style scoped>
.homeclass {
    width: 280px;
    height: 150px;
    border: 1px solid;
    border-radius: 15px;
    background-color: #43ACF9;
    float: left;
    margin-left: 22px;
    font-size: 40px;
    color: #fff;
    font-weight: bold;
    background: linear-gradient(190deg, #43ACF9, #9ed4fb);
}

.homeclass span {
    margin: 30px;
}

.homeclass1 span {
    margin: 30px;
}

.homeclass2 span {
    margin: 30px;
}

.homeclass3 span {
    margin: 30px;
}

.homeclass1 {
    width: 280px;
    height: 150px;
    border: 1px solid;
    border-radius: 15px;
    background-color: #2AD3A1;
    float: left;
<<<<<<< HEAD:src/views/Home/Home.vue
    margin-left: 22px;
=======
    margin-left: 30px;
>>>>>>> beb584824be5c8f33b1ca3570e5e5af46136ffeb:src/views/Home/components/Home.vue
    font-size: 40px;
    color: #fff;
    font-weight: bold;
    background: linear-gradient(190deg, #2AD3A1, #a9f7df);
}

.homeclass2 {
    width: 280px;
    height: 150px;
    border: 1px solid;
    border-radius: 15px;
    background-color: #386AEA;
    float: left;
<<<<<<< HEAD:src/views/Home/Home.vue
    margin-left: 22px;
=======
    margin-left: 30px;
>>>>>>> beb584824be5c8f33b1ca3570e5e5af46136ffeb:src/views/Home/components/Home.vue
    font-size: 40px;
    color: #fff;
    font-weight: bold;
    background: linear-gradient(190deg, #608cfb, #85a4f9);
}

.homeclass3 {
    width: 280px;
    height: 150px;
    border: 1px solid;
    border-radius: 15px;
    background-color: #6830E3;
    float: left;
<<<<<<< HEAD:src/views/Home/Home.vue
    margin-left: 22px;
=======
    margin-left: 30px;
>>>>>>> beb584824be5c8f33b1ca3570e5e5af46136ffeb:src/views/Home/components/Home.vue
    font-size: 40px;
    color: #fff;
    font-weight: bold;
    background: linear-gradient(190deg, #6830E3, #b578fc);
}

.fille {
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    border: 1px solid;
    background-color: #fff;
    border-radius: 50%;
    position: relative;
    left: 180px;
    bottom: 50px;

}

.toneq {
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    border: 1px solid;
    background-color: #fff;
    border-radius: 50%;
    position: relative;
    left: 180px;
    bottom: 50px;
}

.tone2 {
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    border: 1px solid;
    background-color: #fff;
    border-radius: 50%;
    position: relative;
    left: 180px;
    bottom: 50px;
}

.tone3 {
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    border: 1px solid;
    background-color: #fff;
    border-radius: 50%;
    position: relative;
    left: 180px;
    bottom: 50px;
}

.homeclass p {
    font-size: 14px;
    position: relative;
    left: 50px;
    bottom: 60px;
}

.homeclass1 p {
    font-size: 14px;
    position: relative;
    left: 50px;
    bottom: 60px;
}

.homeclass2 p {
    font-size: 14px;
    position: relative;
    left: 50px;
    bottom: 60px;
}

.homeclass3 p {
    font-size: 14px;
    position: relative;
    left: 50px;
    bottom: 60px;
}

.homeclass .fille1 {
    font-size: 8px;
}

.homeclass1 .fille1 {
    font-size: 8px;
}

.homeclass2 .fille1 {
    font-size: 8px;
}

.homeclass3 .fille1 {
    font-size: 8px;
}
<<<<<<< HEAD:src/views/Home/Home.vue
=======

.line {
    width: 280px;
    height: 400px;
    border: 1px solid rgb(233, 224, 224);
    float: right;
    border-radius: 10px;
    margin-top: -200px;
    margin-right: 30px;
}

.line p {
    color: #737373;
    font-size: 20px;
    margin: 20px;
}

.box {
    width: 80px;
    height: 80px;
    border: 1px solid rgb(215, 209, 209);
    border-radius: 50%;
    position: relative;
    left: 1100px;
    bottom: 80px;
    background-color: #b6cde7;
}

.box1 {
    width: 80px;
    height: 80px;
    border: 1px solid rgb(215, 209, 209);
    border-radius: 50%;
    position: relative;
    left: 1050px;
    bottom: 190px;
    background-color: #cce9ee;
}

.box2 {
    width: 80px;
    height: 80px;
    border: 1px solid rgb(215, 209, 209);
    border-radius: 50%;
    position: relative;
    left: 1110px;
    bottom: 177px;
    background-color: #c8e9f1;
}

.box3 {
    width: 80px;
    height: 80px;
    border: 1px solid rgb(215, 209, 209);
    border-radius: 50%;
    position: relative;
    left: 1048px;
    bottom: 220px;
    background-color: #f0e3ee;
}

.box4 {
    width: 80px;
    height: 80px;
    border: 1px solid rgb(215, 209, 209);
    border-radius: 50%;
    position: relative;
    left: 994px;
    bottom: 403px;
    background-color: #b4c8e4;
}

.box5 {
    width: 80px;
    height: 80px;
    border: 1px solid rgb(215, 209, 209);
    border-radius: 50%;
    position: relative;
    left: 985px;
    bottom: 414px;
    background-color: #efe2ee;
}

.box6 {
    width: 150px;
    height: 150px;
    border: 1px solid rgb(215, 209, 209);
    border-radius: 50%;
    position: relative;
    left: 1010px;
    bottom: 560px;
    background-color: #6b98cd;
}

.box7 {
    width: 120px;
    height: 120px;
    border: 10px solid #3d4d9f;
    border-radius: 50%;
    position: relative;
    left: 1027px;
    bottom: 695px;
}

.box8 {
    width: 80px;
    height: 40px;
    border-radius: 50%;
    position: relative;
    left: 1047px;
    bottom: 805px;
    background-color: #386AEA;
    color: #fdfdfd;
    text-align: center;
    justify-content: space-between;
    line-height: 40px;
    font-size: 10px;
}

.box9 {
    width: 93px;
    height: 65px;
    border-radius: 50%;
    position: relative;
    left: 1041px;
    bottom: 809px;
    background-color: #2e9eeec5;
    color: #eaf2f9;
    text-align: center;
    justify-content: space-between;
    line-height: 65px;
    font-size: 20px;
}

.box10 p {
    position: absolute;
    bottom: 730px;
    left: 1027px;
}

.box10 .box11 {
    position: relative;
    bottom: 720px;
    left: 1026px;

}
#myslass{
    width: 100%;
    border: 1px solid;
    border-radius: 10px;
    background-color: #2AD3A1;
    position: relative;
    bottom: 650px;
    left: 20px;
}
>>>>>>> beb584824be5c8f33b1ca3570e5e5af46136ffeb:src/views/Home/components/Home.vue
</style>